import { usePlayerStore } from '@/stores/playerStore'

// 判断内层元素是否超过父元素
export default function useIsExceed(outerClassName: string, innerClassName: string) {
  const playerStore = usePlayerStore()
  const isExceed = ref<boolean>(false)
  watch(
    () => playerStore.fullScreen,
    async (newFullScreen) => {
      await nextTick()
      if (newFullScreen) {
        const outerEle = document.querySelector(outerClassName)!
        const innerEle = document.querySelector(innerClassName)!
        isExceed.value = innerEle.clientWidth > outerEle.clientWidth
      }
    }
  )
  return {
    isExceed
  }
}
